<template>
  <el-popover
    placement="bottom-end"
    width="fit-content"
    :show-arrow="false"
    trigger="hover"
    popper-style="padding: 0;"
  >
    <div style="min-width: 200px; min-height: 80px">
      <div style="font-size: 14px; font-weight: 700; padding: 20px 20px 0">
        批量摘取
      </div>
      <div class="item-pick" @click="handlePick('origin')">
        <el-icon>
          <PickArrow></PickArrow>
        </el-icon>
        <span>摘取原文</span>
      </div>
      <div class="item-pick" @click="handlePick('ai')">
        <el-icon>
          <PickArrow></PickArrow>
        </el-icon>
        <span>摘取改写结果</span>
      </div>
      <div class="item-pick">
        <el-icon style="transform: rotate(45deg)">
          <Component :is="icon[0].icon" />
        </el-icon>
        <div style="display: flex; justify-content: space-between">
          <span>摘取标记内容</span>
          <div
            style="
              display: flex;
              align-items: center;
              margin-left: 20px;
              gap: 10px;
            "
          >
            <div
              v-for="(i, index) in icon"
              :key="index"
              @click.stop="() => {}"
              class="activemark"
            >
              <el-icon
                color="#fff"
                class="icon-hover"
                :style="{
                  backgroundColor: i.color,
                  borderRadius: '50%',
                }"
                @click="handlePick(i.value)"
              >
                <Component :is="i.icon" />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #reference>
      <el-icon size="22">
        <Pick />
      </el-icon>
    </template>
  </el-popover>
  <el-dialog v-model="dialogVisible" top="30vh" width="500">
    <div
      style="
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        font-weight: 700;
      "
    >
      <el-icon color="orange" size="20">
        <Warning />
      </el-icon>
      确定要将<template v-if="pickName === 'origin'">所有原文内容</template>
      <template v-else-if="pickName === 'ai'">所有改写内容</template>
      <template v-else-if="pickName === 'important'">
        <el-icon
          color="#fff"
          :style="{
            backgroundColor: props.icon[0].color,
            borderRadius: '50%',
            width: '20px',
            height: '20px',
          }"
        >
          <Component :is="props.icon[0].icon" /> </el-icon
        >标记内容
      </template>
      <template v-else-if="pickName === 'question'">
        <el-icon
          color="#fff"
          :style="{
            backgroundColor: props.icon[1].color,
            borderRadius: '50%',
            width: '20px',
            height: '20px',
          }"
        >
          <Component :is="props.icon[1].icon" />
        </el-icon>
        标记内容</template
      >摘取到右侧笔记吗？
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false" round>取消</el-button>
        <el-button type="primary" round @click="handleConfirm">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue'
import Pick from '@/icons/Pick.vue'
const PickArrow = defineAsyncComponent(() => import('@/icons/PickArrow.vue'))
const mapColor = {
  important: 'rgba(125, 220, 255, 0.6)',
  question: 'rgba(255, 158, 203, 0.6)',
}
const selectedMark = ref([])
const props = defineProps({
  icon: {
    type: Array<any>,
    default: () => {},
  },
})
const dialogVisible = ref(false)
const emits = defineEmits(['confirm'])
const pickName = ref('')
const handlePick = (value) => {
  pickName.value = value
  dialogVisible.value = true
}
const handleConfirm = () => {
  emits('confirm', pickName.value)
  dialogVisible.value = false
}
</script>
<style scoped lang="scss">
.icon-hover {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  &:hover {
    scale: 1.2;
  }
}
.item-pick {
  padding: 15px 20px;
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  &:hover {
    background-color: #e0dfff;
  }
}
.pick-popover {
  padding: 0 !important;
}
</style>
